<template>
  <div>
    <div class="tickerList">
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="name">{{ item.coin }}<span class="label">/{{ item.currency }}</span></div>
          <div class="price">{{ item.price }}</div>
          <div class="change" :class="{red: item.change < 0, green: item.change > 0}">
           {{ item.change > 0 ? `${item.change}` : item.change.replace(/[-]/g,"") }}% <van-icon name="play" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
let timer = null
let isDestroy = false
export default {
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      list: ({ ticker }) => ticker.list.slice(0, 3)
    })
  },
  created () {
    isDestroy = false
    this.loadData()
  },
  beforeDestroy () {
    isDestroy = true
    clearTimeout(timer)
  },
  methods: {
    ...mapActions({
      getTickerList: 'ticker/getTickerList'
    }),
    loadData () {
      this.getTickerList({
        currency: this.currency.name,
        order: 'price',
        order_type: 'desc'
      }).finally(() => {
        if (isDestroy) { return }
        clearTimeout(timer)
        timer = setTimeout(() => {
          this.loadData()
        }, 1000)
      })
    }
  }
}
</script>

<style scoped lang="less">
.tickerList{
  margin-top: 12px;
  ul{
     display: flex;
     justify-content: space-between;
    li{
      width: 103px;
      height: 126px;
      text-align: center;
      background: #FFFFFF;
      border-radius: 10px;
      .name{
        margin-top: 24px;
        font-size: 20px;
        font-weight: 400;
        color: #000000;
        .label{
          margin-left: 5px;
          font-size: 13px;
          font-weight: 400;
          color: #3871F9;
        }
      }
      .price{
        padding: 8px 0 10px 0;
        font-size: 18px;
        font-weight: bold;
        color: #3871F9;
        line-height: 27px;
      }
      .change{
        font-size: 14px;
        font-weight: 400;
        color: #23D7AF;
        display: flex;
        align-items: center;
        justify-content: center;
        .van-icon{
          transform:rotate(-90deg);
        }
        &.red{
          color: #FF5D5D;
          .van-icon{
            transform:rotate(90deg);
          }
        }
      }
    }
  }
}



// .name {
//   font-size: 12px;
//   font-weight: bold;
// }
// .price {
//   margin: 5px 0;
//   font-size: 16px;
//   color: #d14b64;
// }
// .change {
//   font-size: 12px;
//   &.red {
//     color: #d14b64;
//   }
//   &.green {
//     color: #04c2ad;
//   }
// }
</style>
